<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全选反选</title>
	</head>
	<style>
		table{
			border-collapse: collapse;
			border: none;
			margin: 120px auto;
		}
		tr{
			background-color: #ececec;
			height: 45px;
		}
		.title{
			background-color: #2787c4;
			text-align: center;
		}
		td{
			height: 35px;
			border: solid #C5C5C5 1px;
		}
		.choose{
			width: 40px;
		}
		.name{
			width: 200px;
		}
		.restaurant{
			width: 100px;
		}
		.in{
			background-color: #f9f9f9;
		}
		.out{
			background-color: #ECECEC;
		}
	</style>
	<body>
		<table>
			<tr class="title">
				<td class="choose"><input type="checkbox"></td>
				<td class="name">菜名</td>
				<td class="restaurant">饭店</td>
			</tr>
			<tr>
				<td class="choose"><input type="checkbox"></td>
				<td>胡萝卜炒黄豆儿</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td class="choose"><input type="checkbox"></td>
				<td>地三鲜</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td class="choose"><input type="checkbox"></td>
				<td>西红柿鸡蛋</td>
				<td>田老师</td>
			</tr>
			<tr>
				<td class="choose"><input type="checkbox"></td>
				<td>酸溜土豆丝</td>
				<td>田老师</td>
			</tr>
		</table>
		<script>
			var tr = document.getElementsByTagName("tr");
			var input = document.getElementsByTagName("input");
			var ok = true;
			
			for(var i = 1; i < tr.length; i++){
				tr[i].onmouseover = function(){
					this.className = "in";
				}
				tr[i].onmouseout = function(){
					this.className = "out";
				}
			}
			
			for(var i = 0 ; i < input.length; i++){
				if(i == 0){
					input[i].onclick = function(){
						if(this.checked){
							for(var i = 1; i < input.length; i++){
								input[i].checked = true;
							}
						}else{
							for(var i = 1; i < input.length; i++){
								input[i].checked = false;
							}
						}
					}
				}else{
					input[i].onclick = function(){
						if(this.checked){
							ok = true;
							for(var i = 1; i < input.length; i++){
								if(!input[i].checked) ok = false;
							}
							if(ok) input[0].checked = true;
						}else{
							input[0].checked = false;
						}
					}
				}
				
			}
		
		</script>
	</body>
</html>
